import {View, Text, StyleSheet, StyleProp, ViewStyle, Button, TouchableOpacity} from 'react-native'
import React, {Component} from 'react'
import {SearchBar} from "react-native-elements";
import {statusHeight, default as styles, padding, border} from "../../style/index";
import {IS_IOS} from "../../style/constant";
import {Actions} from "react-native-router-flux";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";
import toast from "../../component/common/ToastProxy";

interface searchPageProps extends Store {

}

interface searchPageState {
}

interface SearchListProps {
    config: {
        title: string,
        list: string[]
    }
    style?: ViewStyle
}

function SearchList(props: SearchListProps) {
    const {config, style} = props;
    return (<View style={[padding(5, 16), {backgroundColor: "#fff"}, style]}>
        <Text style={[{fontSize: 12, color: "#666666", marginVertical: 9}]}>{config.title}</Text>
        <View style={[styles.flexDirectionRowNotFlex, {flexWrap: "wrap", paddingRight: -4}]}>
            {config.list.map((label: string, index: number) => {
                return (
                    <View key={index} style={[padding(5, 16), {
                        marginRight: 4,
                        borderRadius: 14,
                        marginBottom: 9
                    }, border(1, "#c9c8c8")]}>
                        <Text style={{fontSize: 12, color: "#666666"}}>{label}</Text>
                    </View>)
            })}
        </View>
    </View>)
}

@inject("search")
@observer
export default class searchPage extends Component<searchPageProps, searchPageState> {


    constructor(props: searchPageProps) {
        super(props);
    }

    search: SearchBar;

    onClearText = () => {
        toast("clear")
        this.search.clearText();
    };

    goToProductDetail(id) {
        return () => {
            Actions.push("ProductDetail", {id});
        }
    };

    onChangeText = async (text) => {
        await this.props.search.getProductsByName(text);
        console.log(this.props.search.products);
    };


    render() {
        const {products} = this.props.search;
        return (<View style={style.container}>
            <View style={[styles.centerH, styles.flexDirectionRowNotFlex]}>
                <SearchBar
                    round
                    ref={search => this.search = search}
                    clearIcon={{
                        color: "#8599ac"
                    }}
                    onChangeText={this.onChangeText}
                    containerStyle={{backgroundColor: null, flex: 1, borderTopWidth: 0, borderBottomWidth: 0}}
                    inputStyle={{paddingVertical: 0, backgroundColor: "#fcfcfc"}}
                    onClearText={this.onClearText}
                    placeholder='请输入商品名称'/>
                <TouchableOpacity style={{marginRight: 10}} onPress={() => Actions.pop()}>
                    <Text>取消</Text>
                </TouchableOpacity>
            </View>{
            products.length ? <View>
                {
                    products.map(({name, id}) => {
                        return <TouchableOpacity onPress={this.goToProductDetail(id)}
                                                 style={[padding(15), {borderBottomWidth: 0.5, borderColor: "#ccc"}]}
                                                 key={id}>
                            <Text style={{fontSize: 14, color: "#555555"}}>{name}</Text>
                        </TouchableOpacity>
                    })
                }
            </View> : (<View><SearchList config={{
                title: "热门搜索",
                list: ["允大", "允大槽坊酒", "有机大米", "油", "酒"],
            }}/>
                < SearchList config={{
                    title: "历史搜索",
                    list: ["允大", "允大槽坊酒", "有机大米", "油", "酒"],
                }} style={{marginTop: 10}}/></View>)}
        </View>)
    }
}

const style = StyleSheet.create({
    container: {
        marginTop: IS_IOS ? statusHeight : 0
    }
});

 